<template>
	<!-- 巡检管理(列表) -->
	<view class="check-assets">
		<picker :range="pickerRange" @change="bindPickerChange" :disabled="pickerDisabled">
			<view class="tab-posi">
				<NewSegmentedControl :current="current" :values="items" style-type="text" active-color="#198a6c"
					@clickItem="onClickItem" />
			</view>
		</picker>
		<view class="content">
			<view>
				<uni-card v-for="(item,index) in assetsList" key="index">
					<template v-slot:title>
						<view class="card-title">
							<view>
								<!-- <uni-icons type="location-filled" size="18" color="#198a6c"></uni-icons> -->
								<text>{{item.inspPlanName}}</text>
							</view>
							<!-- <text class="right-txt color1">{{item.inspRecordStatusCn}}</text> -->
							<text class="right-txt color2" v-if="item.statusCh=='已完成'">已完成</text>
							<text class="right-txt color3" v-else-if="item.status=='1'">{{item.statusCh}}</text>
							<text class="right-txt color1" v-else>{{item.statusCh||'--'}}</text>
						</view>
					</template>
					<uni-list :border="false" @click="toInfo(item)">
						<uni-list-item showArrow>
							<template v-slot:body>
								<view class="slot-box">
									<view>
										<uni-icons type="shop-filled" size="18" color="#198a6c"></uni-icons>
										<text>{{item.storeName}}</text>
									</view>
									<view class="">
										计划执行次数：{{item.execuTotalQty}}
									</view>
									<view class="">
										未执行次数：{{item.undoNum}}
									</view>
									<view class="">
										执行中次数：{{item.exectingNum}}
									</view>
									<view class="">
										已完成次数：{{item.completedNum}}
									</view>
									<view class="">
										存在整改次数：{{item.rectifyRecordNum}}
									</view>
									<view>
										开始时间：{{item.inspStartTime}}
									</view>
									<view class="">
										结束时间：{{item.inspEndTime}}
									</view>
									<!-- <view class="check-name">
										<uni-icons type="calendar" size="14"></uni-icons>
										{{item.inspPlanStartTime.replace(/T/g," ")}} 至
										{{item.inspPlanEndTime.replace(/T/g," ")}}
									</view>
									<view class="check-name">
										<uni-icons type="compose" size="14"></uni-icons>{{item.inspPlanRemarks}}
									</view> -->
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</uni-card>
				<!-- 加载结束 -->
				<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>

			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref
	} from "vue";
	import {
		onPullDownRefresh,
		onReachBottom,
		onLoad,
		stopPullDownRefresh,
		onShow,
		onBackPress
	} from "@dcloudio/uni-app";
	import {
		inspectionList,
		getAllEnum,
		getStoreList
	} from '@/common/api/inspectionAPI.ts';
	import {
		CONSTANT
	} from '@/common/config/config.ts'
	import {
		fromSearch
	} from '@/common/util/tabSearchUse.ts';
	/*
	 *
	 * 数据
	 * 
	 */
	const current = ref(0);
	const qrCode=ref('')
	const items = ref(["门店", "状态"]);
	const optionsStatus = ref([])
	const optionsStore = ref([])
	const popupStatus = ref(null)
	const popupStore = ref(null)
	const assetsList = ref([])
	const repairItem = ref({})
	const showLoadMore = ref(false)
	const loadMoreText = ref('加载中...')
	const page = ref(CONSTANT.initPage); //初始加载页码
	const rows = ref(CONSTANT.pageSize);
	const allPages = ref(0); //总页码数
	const searchParams = ref({
		status: '',
		storeName: '',
		inspStoreId: null
	}); //查询条件
	const matchRule = {
		status: 'eq',
		storeName: 'cn',
		inspStoreId: 'eq'
	}; //匹配条件
	const pickerRange=ref([])
	const pickerDisabled=ref(false)//控制picker是否禁用
	const currentTab=ref(0)
	
	/***方法***/
	onBackPress((e)=>{
		uni.switchTab({
			url:'/pages/index/index'
		})
		
		return true
	})
	onLoad((par) => {
		if (par.qrCode) {
			qrCode.value = par.qrCode
		}
		assetsList.value=[]
		getCheckDetailList()
	})
	
	
	const onClickItem = (e: any) => {
		page.value = CONSTANT.initPage
		currentTab.value=e.currentIndex
		if (e.currentIndex == 0) {
			pickerRange.value=optionsStore.value.map(item=>{
				return item.label
			})
			pickerRange.value.push('全部')
		}
		if (e.currentIndex == 1) {
			pickerRange.value=optionsStatus.value.map(item=>{
				return item.label
			})
			pickerRange.value.push('全部')
		}
	};

	const getCheckDetailList = () => {
		let config = {
			page: page.value,
			rows: rows.value,
			storeId:qrCode.value||null
		}
		const params = Object.assign(fromSearch(searchParams.value, matchRule), config)
		loadMoreText.value = '加载中...'
		inspectionList(params).then((res: any) => {
			uni.stopPullDownRefresh();
			if (res.code == 0) {
				allPages.value = res.data.pages;
				page.value = res.data.current;
				assetsList.value = assetsList.value.concat(res.data.records);
				
				if (assetsList.value.length === 0) {
					showLoadMore.value = true;
					loadMoreText.value = '暂无数据'
				} else if (assetsList.value.length >= res.data.total) {
					showLoadMore.value = true;
					loadMoreText.value = '没有更多的数据了'
				} else {
					showLoadMore.value = false;
				}
				
			}else{
				uni.showToast({
					icon:'none',
					title:res.message
				})
			}
		})
	}


	const getEnums = () => {
		getAllEnum('*').then((res: any) => {
			if (res.code == 0) {
				res.data.InspStoreGroupStatus.forEach(item => {
					optionsStatus.value.push({
						value: item.code,
						label: item.value
					})
				})
			}
		})
		// 获取门店列表
		const params2 = Object.assign(fromSearch({
			status: null
		}, {
			status: 'eq'
		}), {
			page: page.value,
			rows: rows.value
		})
		getStoreList(params2).then((res: any) => {
			if (res.code == 0) {
				res.data.records.forEach(item => {
					optionsStore.value.push({
						label: item.storeName,
						value: item.storeName
					})
				})
			}
		})
	}
	getEnums()


	onPullDownRefresh(() => {
		page.value = CONSTANT.initPage; //重置页码
		assetsList.value = []; //重置列表
		showLoadMore.value = true;
		getCheckDetailList();
	});
	onReachBottom(() => {
		if (page.value > allPages.value || page.value == allPages.value) {
			loadMoreText.value = '没有更多的数据了'
			showLoadMore.value = true;
		} else {
			page.value++;
			loadMoreText.value = '加载中……';
			showLoadMore.value = true;
			getCheckDetailList();
		}
	})
	const toInfo = (item) => {
		uni.setStorageSync('inspectDetailParams',item)
		
		uni.navigateTo({
			url: `/pages/ipqc/inspectDetail/index?rowData=${JSON.stringify(item)}`
		})
		
	}
	const bindPickerChange = (e) => {
		let len = pickerRange.value.length-1
		assetsList.value = []
		if(currentTab.value==0){//门店
			items.value[0] = e.detail.value==len?'门店':pickerRange.value[e.detail.value]
			searchParams.value.storeName = e.detail.value==len?'':optionsStore.value[e.detail.value].value
		}else if(currentTab.value==1){//状态
			items.value[1] = e.detail.value==len?'状态':pickerRange.value[e.detail.value]
			searchParams.value.status = e.detail.value==len?'':optionsStatus.value[e.detail.value].value
		}
		assetsList.value=[]
		getCheckDetailList()
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		height: 100%;
	}

	.check-assets {
		height: 100%;
		// background-color: #f4f4f4;

		.segmented-control {
			background-color: #fff;
		}
	}

	.content {
		padding: 30px 0px 80px 0px;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.card-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #ebeef5;
		position: relative;

		.right-txt {
			font-size: 12px;
			color: #fff;
			padding: 5rpx 20rpx;
			box-sizing: border-box;
			border-radius: 18rpx 0 0 18rpx;
			position: absolute;
			right: -20rpx;
			// line-height: 40rpx;
		}

		.color1 {
			background-color: #7098ed;
		}

		.color2 {
			background-color: #999999;
		}
		.color3 {
			background-color: #fda659;
		}
	}

	.uni-list-item {
		font-size: 14px !important;

		.check-time {
			color: #fda659;
		}
	}

	.check-name {
		font-size: 12px;
	}
</style>
